import React, { Component } from 'react';
import { Layout, Menu, Icon } from 'antd';
import MyNavLink from '../components/mynavlink';
import {withRouter} from 'react-router-dom';
import cookie from 'react-cookies';
const { SubMenu } = Menu;
class MenuLeft extends Component {
    constructor(props) {
        super(props);
        // console.log(window.location.pathname.split('/')[1])
    }

    rootSubmenuKeys = ['sub1', 'sub2', 'sub3', 'sub4', 'sub5'];

    state = {
        menuMod:'concise',    //concise:点击菜单，收起其他展开的所有菜单，保持菜单聚焦简洁。normal:普通
        openKeys: [],
        snapkeys:[],
        selectedKeys:[]
    };

    componentWillUnmount() {
        this.change_openKeys()
    }

    componentDidMount() {
        this.props.menuRef(this)
        // console.log(cookie.load('p_key') == undefined,cookie.load('p_key'))    
        if(this.props.location.state == undefined){
            // console.log(typeof(this.props.location.state)) 
            this.setState({
                selectedKeys: [cookie.load('s_key')!='undefined'?cookie.load('s_key'):'/home/system'],
                openKeys: [cookie.load('p_key')!='undefined'?cookie.load('p_key'):'sub1'],
                snapkeys:[cookie.load('p_key')!='undefined'?cookie.load('p_key'):'sub1'],
            })
        }else{
            if(this.props.location.state.mod == 'login'){
                this.setState({
                    selectedKeys: [this.props.location.state.selectedKeys],
                    openKeys: [this.props.location.state.p_key],
                    snapkeys:[this.props.location.state.p_key],
                })
                cookie.save('s_key',this.props.location.state.selectedKeys,{path:'/'})
                cookie.save('p_key',this.props.location.state.p_key,{path:'/'})  
            }
        }  
    }

    change_openKeys = this.props.history.listen(listener=>{
        const selectedKeys = listener.pathname?listener.state?listener.state.ifrepathname?this.state.selectedKeys[0]:listener.pathname:listener.pathname:'/home/system';
        const openKeys = listener.state?listener.state.p_key!=''&&listener.state.p_key!=undefined?listener.state.p_key:this.state.openKeys[0]:this.state.openKeys[0];
        this.setState({ 
            selectedKeys:[selectedKeys],
            openKeys:[openKeys]
        })
        cookie.save('s_key',selectedKeys,{path:'/'})
        cookie.save('p_key',openKeys,{path:'/'})
    })

    onOpenChange = openKeys => {
        const latestOpenKey = this.state.menuMod == 'concise'?(openKeys.find(key => this.state.openKeys.indexOf(key) === -1)):(openKeys.filter(key => this.state.openKeys.indexOf(key) === -1));
        if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
            this.setState({ openKeys });
        } else {
            this.setState({
                openKeys: latestOpenKey ? [latestOpenKey] : [],
            });
        }
    }

    menuclose = () => {
        this.setState({
            snapkeys:this.state.openKeys, //记录侧边栏收缩前的keys
            openKeys:[]
        })
    }

    menuopen = () => {
        this.setState({
            openKeys:this.state.snapkeys,
            snapkeys:[]
        })
    }

    onSelect = ({item}) => {
        this.setState({
            selectedKeys:[item.props.eventKey],
            openKeys:[item.props.p_key],
        })
        cookie.save('s_key',item.props.eventKey,{path:'/'})
        cookie.save('p_key',item.props.p_key,{path:'/'})
        cookie.remove('mainlist',{ path: '/' })
    }

    render() {
        const path = {
            system:{
                pathname:'/home/system',
                state:{p_key:'sub1'}
            },
            product:{
                pathname:'/home/product',
                state:{p_key:'sub1'}
            },
            message:{
                pathname:'/home/message',
                state:{p_key:'sub1'}
            },
            tag:{
                pathname:'/home/tag',
                state:{p_key:'sub1'}
            },
            formmag:{
                pathname:'/home/formmag',
                state:{p_key:'sub1'}
            },
            info:{
                pathname:'/home/info',
                state:{p_key:'sub2'}
            },
            classlist:{
                pathname:'/home/classlist',
                state:{p_key:'sub2'}
            },
            account:{
                pathname:'/home/account',
                state:{p_key:'sub2'}
            },
            setting:{
                pathname:'/home/setting',
                state:{p_key:'sub3'}
            },
            logger:{
                pathname:'/home/logger', 
                state:{p_key:'sub3'}
            },
            webmanagement:{
                pathname:'/home/webmanagement', 
                state:{p_key:'sub4'}
            },
            webtype:{
                pathname:'/home/webtype', 
                state:{p_key:'sub4'}
            },
            tplindustry:{
                pathname:'/home/tplindustry', 
                state:{p_key:'sub4'}
            },
            tplcolor:{
                pathname:'/home/tplcolor', 
                state:{p_key:'sub4'}
            },
            xxlclient:{
                pathname:'/home/xxlclient', 
                state:{p_key:'sub5'}
            },
            xxltongji:{
                pathname:'/home/xxltongji', 
                state:{p_key:'sub5'}
            },
            xxlgoutong:{
                pathname:'/home/xxlgoutong', 
                state:{p_key:'sub5'}
            },
            xxlrate:{
                pathname:'/home/xxlrate', 
                state:{p_key:'sub5'}
            },
        };
        return (
            <div>
                <div className="logo" ><img src={require('../common/images/app-logo.png')} alt=""/></div>
                <Menu 
                    className='menu' 
                    theme="dark" 
                    mode="inline" 
                    selectedKeys={this.state.selectedKeys}
                    defaultSelectedKeys={this.props.location.pathname!=''?this.props.location.pathname:'/home/system'}  //初始选中的Menu.Item菜单项 key 数组
                    openKeys={this.state.openKeys}
                    onOpenChange={this.onOpenChange}
                    onSelect={this.onSelect}
                >
                    <SubMenu
                        key='sub1'
                        title={
                            <div>
                                <Icon type="user" />
                                <span>信息管理</span>
                            </div>
                        }
                    >
                        <Menu.Item p_key='sub1' key="/home/system"><MyNavLink to={path.system}>系统信息</MyNavLink></Menu.Item>
                        <Menu.Item p_key='sub1' key="/home/product"><MyNavLink to={path.product}>产品中心</MyNavLink></Menu.Item>
                        <Menu.Item p_key='sub1' key="/home/message"><MyNavLink to={path.message}>留言管理</MyNavLink></Menu.Item>
                        <Menu.Item p_key='sub1' key="/home/tag"><MyNavLink to={path.tag}>标签管理</MyNavLink></Menu.Item>
                        <Menu.Item p_key='sub1' key="/home/formmag"><MyNavLink to={path.formmag}>表单管理</MyNavLink></Menu.Item>
                        <Menu.Item p_key='sub1' key="sub1-6">下载管理</Menu.Item>
                    </SubMenu>
                    <SubMenu
                        key='sub2'
                        title={
                            <div>
                                <Icon type="video-camera" />
                                <span>网站管理</span>
                            </div>
                        }
                    >
                        <Menu.Item p_key='sub2' key="/home/info"><MyNavLink to={path.info}>站点信息</MyNavLink></Menu.Item>
                        <Menu.Item p_key='sub2' key="/home/classlist"><MyNavLink to={path.classlist}>栏目管理</MyNavLink></Menu.Item>
                        <Menu.Item p_key='sub2' key="/home/account"><MyNavLink to={path.account}>账号管理</MyNavLink></Menu.Item>
                        <Menu.Item key="sub2-3">导航管理</Menu.Item>
                        <Menu.Item key="sub2-5">电脑端界面</Menu.Item>
                        <Menu.Item key="sub2-7">移动端界面</Menu.Item>
                        <Menu.Item key="sub2-8">友情链接</Menu.Item>
                        <Menu.Item key="sub2-9">营销单页</Menu.Item>
                    </SubMenu>
                    <SubMenu
                        key='sub3'
                        title={
                            <div>
                                <Icon type="setting" />
                                <span>其他设置</span>
                            </div>
                        }
                    >
                        <Menu.Item p_key='sub3' key="/home/setting"><MyNavLink to={path.setting}>账号设置</MyNavLink></Menu.Item>
                        <Menu.Item p_key='sub3' key="/home/logger"><MyNavLink to={path.logger}>日志查询</MyNavLink></Menu.Item>
                    </SubMenu>
                    <SubMenu
                        key='sub4'
                        title={
                            <div>
                                <Icon type="check-circle" />
                                <span>网站模板</span>
                            </div>
                        }
                    >
                        <Menu.Item p_key='sub4' key="/home/webmanagement"><MyNavLink to={path.webmanagement}>模板管理</MyNavLink></Menu.Item>
                        <Menu.Item p_key='sub4' key="/home/webtype"><MyNavLink to={path.webtype}>网站类型</MyNavLink></Menu.Item>
                        <Menu.Item p_key='sub4' key="/home/tplindustry"><MyNavLink to={path.tplindustry}>行业分类</MyNavLink></Menu.Item>
                        <Menu.Item p_key='sub4' key="/home/tplcolor"><MyNavLink to={path.tplcolor}>颜色分类</MyNavLink></Menu.Item>
                    </SubMenu>
                    <SubMenu
                        key='sub5'
                        title={
                            <div>
                                <Icon type="align-left" />
                                <span>信息流</span>
                            </div>
                        }
                    >
                        <Menu.Item p_key='sub5' key="/home/xxlclient"><MyNavLink to={path.xxlclient}>模板管理</MyNavLink></Menu.Item>
                        <Menu.Item p_key='sub5' key="/home/xxltongji"><MyNavLink to={path.xxltongji}>访问统计</MyNavLink></Menu.Item>
                        <Menu.Item p_key='sub5' key="/home/xxlgoutong"><MyNavLink to={path.xxlgoutong}>访问留言</MyNavLink></Menu.Item>
                        <Menu.Item p_key='sub5' key="/home/xxlrate"><MyNavLink to={path.xxlrate}>转化率</MyNavLink></Menu.Item>
                    </SubMenu>
                </Menu>
            </div>
        );
    }
}

export default withRouter(MenuLeft);